<template>
  <div class="Zlgl_edit">
    <!-- 第一行 -->
    <el-row>
      <el-col>
        <div class="header_title">修改资料管理信息</div>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <div class="content_add">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="editData"
      >
        <el-form-item label="装备型号">
          <el-select
            v-model="editData.equipmentModel"
            clearable
            placeholder="装备类型A"
            style="width: 400px"
          >
            <el-option
              v-for="(v, i) in equipment_typeData"
              :key="i"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资料名称">
          <el-input
            v-model="editData.dataName"
            placeholder="轻型步战车维修手册"
          ></el-input>
        </el-form-item>
        <el-form-item label="资料类型">
          <!-- v-model="editData.equipmentData.categoryId" -->
          <el-select
            v-model="editData.equipmentData.categoryId"
            clearable
            placeholder="维修手册"
            style="width: 400px"
          >
            <el-option
              v-for="(v, i) in selectDataTypeData"
              :key="i"
              :label="v.categoryName"
              :value="v.categoryId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="上传资料">
          <el-upload
            class="upload-demo"
            name="multipartFile"
            action="http://118.31.58.45:8080/maintenance/upload"
            multiple
            :limit="1"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :on-success="success"
            :file-list="fileList"
          >
       <!--      <span style="margin-right: 40px"
              >文件名：{{ editData.fileAddress }}</span
            > -->
            <el-button size="medium" type="primary">修改文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="资料说明">
          <el-input
            class="textarea_text"
            type="textarea"
            v-model="editData.dataDesc"
            :rows="15"
            style=""
            placeholder="资料说明信息"
          >
          </el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="addBtnGroup">
          <el-button class="cancelBtn" @click="cancelInfo">取消</el-button>
          <el-button type="primary" @click="editInfo">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      labelPosition: "left",
      editData: {
        equipmentData: {
          categoryId: "",
          updateTime: "",
        },
        dataDesc: "",
        dataId: "",
        dataName: "",
        equipmentModel: "",
        fileAddress: "",
        fileUploadTime: "",
      },
      //   editData: [],
      //  上传数据
      fileList: [],
      // 资料类型下拉数据
      selectDataTypeData: [],
      equipment_typeData: [],
      updateTime: "",
    };
  },
  methods: {
    // 获取session中的数据
    getZlglEditData: function () {
      let getEditZlglData = sessionStorage.getItem("zlglInfo");
      this.editData = JSON.parse(getEditZlglData);
      this.fileList = [{name:this.editData.fileAddress}];
    },
    // 修改
    editInfo: function () {
      this.$axios({
        url: "/data/update",
        method: "put",
        data: {
          // 装备型号
          equipmentModel: this.editData.equipmentModel,
          // 装备类型
          categoryId: this.editData.equipmentData.categoryId,
          //  更新时间
          updateTime: this.updateTime,
          // 资料名称
          dataName: this.editData.dataName,
          // 资料ID
          dataId: this.editData.dataId,
          // 资料说明
          dataDesc: this.editData.dataDesc,
          // 上传地址中的文件名
          fileAddress: this.editData.fileAddress,
          // 上传时间
          fileUploadTime: this.updateTime,
        },
      }).then((res) => {
        // console.log("资料管理修改数据", res);
        if (res.data.code == 0) {
          // this.$message.success("修改成功");
          this.$router.push("/home/Zlgl");
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    // 取消
    cancelInfo: function () {
      this.$router.push("/home/Zlgl");
    },

    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
      // console.log(this.fileList);
    },
    //上传文件
    update(e) {
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append("multipartFile", file); //通过append向form对象添加数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.$axios.post("/upload", param, config).then((res) => {
        // this.fileList = res;
        // console.log( this.fileList);
      });
    },
    success: function ({ data }) {
      this.editData.fileAddress = data[0] + "";
      // console.log(this.editData.fileAddress);
    },
    // 删除上传列表
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      this.$message.warning(`文件已经删除...`);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `单次上传只能有 1 个文件，若要修改请先删除 ${this.editData.fileAddress} 文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 资料类型下拉
    getSelectDataTypeData: function () {
      this.$axios({
        url: "/data/selectDataType",
        method: "post",
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.selectDataTypeData = res.data.data;
        } else {
          this.$message.error("资料类型下拉框数据加载失败！");
        }
      });
    },
    // 装备类型下拉数据
    getSelectEquipmentModel: function () {
      this.$axios({
        url: "/data/selectEquipmentModel",
        method: "post",
      }).then((res) => {
        // console.log(res)
        if (res.data.code == 0) {
          this.equipment_typeData = res.data.data;
        } else {
          this.$message.error("装备类型下拉框数据加载失败！");
        }
      });
    },
    // 获取当前本地时间
    getNowTime: function () {
      let nowDateTime = new Date();
      this.updateTime = nowDateTime;
      // console.log(this.updateTime);
    },
  },
  mounted: function () {
    this.getZlglEditData();
    this.getSelectDataTypeData();
    this.getSelectEquipmentModel();
    this.getNowTime();
  },
};
</script>

<style lang="less" scoped>
.Zlgl_edit {
  width: 100%;
  height: 100%;
  //   background: aquamarine;
  .el-col {
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
  }
  .header_title {
    height: 40px;
    width: 100%;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
  }
  .el-form {
    height: 700px;
    width: 1300px;
    font-size: 20px;
    margin-top: 40px;
    margin-left: 40px;
    // background: yellow;
    position: relative;

    .el-form-item {
      width: 580px;
      float: left;
      padding: 20px 20px 20px 0px;
      margin: 0;
    }

    .el-input {
      width: 400px;
      height: 40px;
      line-height: 40px;
    }

    .addBtnGroup {
      text-align: center;
      position: absolute;
      bottom: 60px;
      left: 300px;

      .el-button {
        background-color: #6554c0;
        color: #fff;
        width: 150px;
        height: 50px;
        font-size: 20px;
        margin-right: 50px;
      }
      .cancelBtn {
        background-color: #fff;
        color: #7161c5;
        border: 1px solid #6a5ac2;
      }
    }
    .textarea_text {
      font-size: 14px;
      color: #b5b1b3;
      min-width: 1000px;
      width: 1000px;
    }
  }
}
</style>